<template>
  <div style="width: 70%">
    <div>
      <el-form ref="form" :model="article" label-width="80px">
        <el-form-item label="分享标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>

        <el-form-item label="分享内容">
          <el-input
            type="textarea"
            maxlength="300"
            show-word-limit
            au
            v-model="article.articleContext"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" ref="form" :model="article" label-width="80px">
        <el-form-item label="分享分类">
          <el-select
            v-model="article.tags"
            multiple
            multiple-limit:3
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="可见人员">
          <el-radio-group v-model="article.articleState">
            <el-radio label="0">所有人</el-radio>
            <el-radio label="1">仅自己</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="能否评论">
          <el-switch v-model="article.cancomment"></el-switch>
        </el-form-item>
        <el-form-item label="能否点赞">
          <el-switch v-model="article.canlike"></el-switch>
        </el-form-item>
        <el-form-item label="能否收藏">
          <el-switch v-model="article.cancollect"></el-switch>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-left: 80px">
      <el-upload
        ref="upload"
        action="http://chm.pengdong.top/user/publish-picture"
        :auto-upload="false"
        list-type="picture-card"
        :http-request="uploadFile"
        :file-list="fileList"
        accept="image/png, image/jpeg, image/jpg"
        multiple
        :limit="6"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

      <el-button size="medium" type="primary" @click="submitUpload"
        >发布</el-button
      >
    </div>
  </div>
</template>
  
 



<script>
import { publishPicture } from "@/api/article";
import { publishArticle } from "@/api/article";
export default {
  data() {
    return {
      article: {
        articleContext: "",
        account: "",
        tag: "",
        title: "",
        articleState: "0",
        pictureId: "",
        sculpture: localStorage.getItem("avatar"),
        tags: [],
        cancomment: true,
        canlike: true,
        cancollect:true,
        canComment:0,
        canLike:0,
        canCollect:0
      },
      fileList: [],
      formData: {},
      options: [
        {
          value: "1",
          label: "美食",
        },
        {
          value: "2",
          label: "影视",
        },
        {
          value: "3",
          label: "学习",
        },
        {
          value: "4",
          label: "娱乐",
        },
        {
          value: "5",
          label: "音乐",
        },
        {
          value: "6",
          label: "科技",
        },
        {
          value: "7",
          label: "运动",
        },
        {
          value: "8",
          label: "生活",
        },
        {
          value: "9",
          label: "时尚",
        },
        {
          value: "10",
          label: "动物",
        },
      ],
    };
  },
  methods: {
    // 绑定在http-request,覆盖上传事件
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    // 点击按钮触发
    submitUpload() {
      var that = this;
      this.formData = new FormData();
      this.$refs.upload.submit();
      publishPicture(this.formData).then((res) => {
        var vo = res.data
        if(vo.code == 10000){
        this.article.pictureId = res.data.data;
        this.article.account = localStorage.getItem("account");
        for (var i = 0; i < this.article.tags.length; i++) {
          this.article.tag += "," + this.article.tags[i];
        }
        this.article.tag = this.article.tag.slice(1);
        if(this.article.canlike == false){
          this.article.canLike = 1;
        }
        else{
          this.article.canLike = 0;
        }
        if(this.article.cancomment == false){
          this.article.canComment = 1;
        }
        else{
          this.article.canComment = 0;
        }
        if(this.article.cancollect == false){
          this.article.canCollect = 1;
        }
        else{
          this.article.canCollect = 0;
        }
        publishArticle(this.article).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            that.$message({
              message: "发布成功！",
              type: "success",
              showClose: true,
            });
            this.$router.push({ path: `/` });
          } else if (vo.code == 10002) {
            that.$message({message: vo.msg, type: 'warn', showClose: true});
          } else if (vo.code == 10001) {
            var msg = vo.msg;
            for (var i = 0; i < vo.data.length; i++) {
              msg += vo.data[i] + " ";
            }
            that.$message({
              message: msg,
              type: "warn",
              showClose: true,
            });
          }
        });
      }
      else{
           this.$message({
              message: vo.msg,
              type: "warn",
              showClose: true,
            });
      }
      });
    },
  },
};
</script>

<style>
.el-button--primary {
  color: white;
  margin-top: 20px;
  margin-right: 10px;
}
</style>